<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%; height: 100%;
				overflow: hidden;
			}
			#bg {
				background: url(img/bg.jpg) no-repeat center;
				background-size: cover;
				width: 100%;
				height: 100%;
				position: fixed;
			}
			img{
				position: absolute;
				width: 20px; height: 20px;
			}
		</style>

	</head>

	<body>

		<div id="bg">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script type="text/javascript">
			function Snow(){
				this.$ele = $("<img>");
				this.init = function(){
					this.$ele.attr("src","img/glowworm.jpg");
					this.$ele.css("left", Math.round($(document).width()*Math.random()));
					this.$ele.css("top",Math.round($(document).height()*Math.random()));
					$(document.body).append(this.$ele);
					this.$ele.show();
					return this;
				}
				this.fly = function(){
					var x = Math.round($(document).width()*Math.random());
					var y = Math.round($(document).height()*Math.random());
					var rantime = Math.round( Math.random()*5000+5000 );
					var that = this;
					this.$ele.animate({left:x,top:y},rantime,function(){
						that.fly();
					})
				}
			}
			
			for(var i=0; i< Math.round(Math.random()*50+50); i++) {
				new Snow().init().fly();
			}
		</script>
	</body>

</html>


















